<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="decorator" content="ERP-UI"/>
<title>qq</title>
 <style type="text/css">
 
</style>
</head>
<body>
 
<div class="g_12">
		<form >
		<div class="g_3">
			自动查询：<input id="selName" width="200px" class="simple_field" placeholder="aaa"/>
		</div>
		<div class="g_6">
			选择的结果：<input  id="result" class="simple_field"/>
		</div>
		</form>
</div>
 
<script type="text/javascript">
$(function() {
	 
	 
	
	//前提是返回的array中必须有value字段
	/* auto.autoComplete('selName','${ctx}/test/testData/autoData'); */
	
	 
 /*  	auto.autoComplete2('selName','${ctx}/test/testData/autoData',function(item,allData){
  		//alert(ui.item.value+'aaa');
  		var selItem;
  		//alert(allData.length);
  		alert(item.id);
  		for(var i=0;i<allData.length;i++){
  			if(allData[i].name==item.id){ //找到匹配的项
  				selItem=allData[i];
  			}
  		} 
  		//将选择的结果放置到result中
  		$('#result').val(selItem.title+'  '+selItem.id);
  	},
  	function(item){//返回的对象中至少应有value供显示
  		return {id:item.id,value:item.title};
  	}); */
  	
	 
   
  	auto.autoComplete3({
  		id:'selName',
  		url:'${ctx}/test/testData/autoData',
  		showItem:function(item){
					/*
					  label:下拉列表中显示的
					  value:选中之后文本框显示的
					  id:用于唯一标识某一行
					*/
  	  				var  uiItem={label:item.title+item.id,
						    	value:item.title,
						    	id:item.id};
  					return uiItem;
  	  			 },
  		click:function(item,allData){
		  	  		var selItem;
		  	  		//找到匹配项
		  	  		for(var i=0;i<allData.length;i++){
		  	  			if(allData[i].id==item.id){ //找到匹配的项
		  	  				selItem=allData[i];
		  	  				break;
		  	  			}
		  	  		} 
		  	  		//将选择的结果放置到result中
		  	  		$('#result').val(selItem.title+'  '+selItem.id);
		  	  	}
  		
  	 });
  	
  });

</script>
</body>
</html>